<template>
    <div>
        <header class="header">
            <div class="header-title">{{ title }}</div>
            <img class="header-img" src="@/assets/three/image/header.png">
        </header>
        <div class="header-message">
            <div class="headerContent">
                <div class="left-item">
                    <div class="date">
                        <div class="moy">{{ date[0] }}</div>
                        <div class="time">
                            {{ date[1] }}
                        </div>
                    </div>
                    <div class="tq" v-if="weather.condition">
                        <img class="weather" :src="weatherOptions[weather.condition]" alt="">
                        <div class="temperature">
                            {{ weather.feelsLikeTemp }}℃
                        </div>
                    </div>
                </div>
                <div class="right-item" v-if="!fullScreen" @click="handleFullscreen">
                    <el-icon :size="24" style="cursor: pointer;">
                        <FullScreen />
                    </el-icon>
                </div>
                <div class="right-item" v-else @click="handleExitFullscreen">
                    <img src="@/assets/three/qpgb.svg" style="width: 26px;height: 26px;cursor: pointer;" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { format } from 'date-fns';
import { defineProps, onMounted, onUnmounted, ref, provide, nextTick } from 'vue';
import { getWeather } from '@/api/tq';

import dyun from '@/assets/tq_image/dyun.png';
import qtian from '@/assets/tq_image/qtian.png';
import xiaoyv from '@/assets/tq_image/xiaoyv.png';
import zhenyv from '@/assets/tq_image/zhenyv.png';
import { useFullscreen } from '@vueuse/core'
const route = useRoute()

const { toggle } = useFullscreen(document.querySelector('.tq-container'))

const fullScreen = ref(false);
// 5. 重置所有缩放效果
const resetScale = (selector) => {
    const el = document.querySelector(selector);
    if (el) {
        el.style.transform = '';
        el.style.marginTop = '';
    }
};
const handleExitFullscreen = async () => {
    // 1. 退出全屏模式
    if (document.fullscreenElement) {
        try {
            await document.exitFullscreen();
        } catch (err) {
            console.error('退出全屏失败:', err);
        }
    }

    // 2. 恢复左侧容器显示
    const leftContainer = document.querySelector('.has-logo');
    if (leftContainer) {
        leftContainer.style.display = ''; // 恢复原始display值
    }

    // 3. 恢复主容器边距
    const mainContainer = document.querySelector('.main-container');
    if (mainContainer) {
        mainContainer.style.marginLeft = ''; // 恢复原始margin
    }

    // 4. 恢复底部导航
    const navBar = document.querySelector('#navBar');
    if (navBar) {
        navBar.style.display = ''; // 恢复原始display值
    }

    const centerBottomContent = document.querySelector('.center-bottom-content')
    if (centerBottomContent&&route.path == '/index') {
        centerBottomContent.style.top = `845px`;
    }

    resetScale('.left-content .content');
    resetScale('.right-content .content');
    resetScale('.plate .header');
    resetScale('.center-bottom-content');

    // 6. 强制重绘（解决部分浏览器样式更新延迟问题）
    document.body.style.zoom = 0.99;
    setTimeout(() => {
        document.body.style.zoom = '';
    }, 10);
    fullScreen.value = false;
};


const handleFullscreen = async () => {

    let appMain = document.querySelector('.app-main');
    appMain.style.height = '1100px'

    // 获取左边的容器
    const leftContainer = document.querySelector('.has-logo');
    leftContainer.style.display = 'none';
    // 再设置距离左边box'b的距离
    document.querySelector('.main-container').style.marginLeft = '0px';
    // 吧底部导航也隐藏
    document.querySelector('#navBar').style.display = 'none';

    document.querySelector('.left-content .content').style.transform = `scale(1.04)`;
    document.querySelector('.left-content .content').style.marginTop = `30px`;

    document.querySelector('.right-content .content').style.transform = `scale(1.04)`;
    document.querySelector('.right-content .content').style.marginTop = `30px`;

    document.querySelector('.plate .header').style.transform = `scale(1.06)`;

    const centerBottomContent = document.querySelector('.center-bottom-content')

    if (centerBottomContent&&route.path == '/index') {
        centerBottomContent.style.top = `910px`;
    }

    nextTick(() => {
        // ✅ 正确：对包裹 Three.js/Cesium 的容器进行全屏
        const container = document.querySelector('.app-container');
        document.documentElement.requestFullscreen(); // 整个页面全屏
        // 或
        container.requestFullscreen(); // 仅 Three.js 容器全屏
        fullScreen.value = true;
    })
}

const props = defineProps({
    title: {
        type: String,
        default: 'ww'
    }
})

const date = ref([]);

const weather = ref({})

let Interval = null;
const getTime = () => {
    date.value = [format(new Date(), 'yyyy-MM-dd'), format(new Date(), 'HH:mm:ss')];
}

let weatherOptions = ref({
    '晴': qtian,
    '小雨': xiaoyv,
    '多云': dyun,
    '阵雨': zhenyv,
});

const getWeatherDate = async () => {
    const { data } = await getWeather({ cityName: '保亭黎族苗族自治县' });
    weather.value = data;
}


onMounted(async () => {
    getTime();
    getWeatherDate();
    const react = document.querySelector('.header').getBoundingClientRect();
    if (react.top == 0 && !fullScreen.value) {
        handleFullscreen();
    }
    fullScreen.value = document.fullscreenElement;
    Interval = setInterval(() => {
        getTime();
    }, 1000);
    setTimeout(getWeatherDate, 60 * 1000 * 30)

})

onUnmounted(() => {
    clearInterval(Interval);
})


</script>
<style lang="scss" scoped>
@use "@/assets/styles/three-home.scss";

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.header {
    width: 100%;
    height: 88px;
    position: relative;
    line-height: 69px;
    text-align: center;

    .header-img {
        width: 100%;
        height: 88px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .header-title {
        font-size: 33px;
        font-weight: bold;
        color: #fff;
        letter-spacing: 6px;
    }
}

.header-message {
    position: absolute;
    width: 100%;
    height: 75px;
    top: 0;
    left: 0;

    .headerContent {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        margin: 0 20px;

        .left-item {
            width: 200px;
            font-size: 16px;
            display: flex;
            align-items: center;
            margin-right: 10px;

            .date {
                .moy {
                    font-size: 14px;
                }

                .time {
                    font-size: 16px;
                    font-weight: bold;
                }
            }

            .tq {
                margin-left: 30px;
                display: flex;
                align-items: center;

                .weather {
                    width: 32px;
                    height: 32px;
                }

                .temperature {
                    margin-left: 10px;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>